<template>
  <div class="login-container">
    <div class="login-video">
      <video src="@/assets/video.mp4" autoplay muted loop />
    </div>
    <div class="login-card">
      <div>
        <div class="logo">
          <img src="@/assets/logo1.png" alt="">
        </div>
        <div class="login-form">
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="username">
              <template>
                <div class="login-iconBox">
                  <img src="@/assets/icon-account.png" class="iconfont-img">
                  <el-input
                    v-model="form.username"
                    placeholder="请输入用户名"
                    class="login-input"
                  />
                </div>
              </template>
            </el-form-item>
            <el-form-item prop="password">
              <template>
                <div class="login-iconBox">
                  <img src="@/assets/icon-password.png" class="iconfont-img">
                  <el-input
                    v-model="form.password"
                    show-password
                    placeholder="请输入密码"
                    class="login-input"
                  />
                </div>
              </template>
            </el-form-item>
            <el-form-item prop="code">
              <template>
                <div class="login-iconBox">
                  <img src="@/assets/icon-code.png" class="iconfont-img">
                  <el-input
                    v-model="form.code"
                    placeholder="请输入验证码"
                    class="login-input"
                  />
                  <img :src="codeUrl" alt="" class="imgCode" @click="codeRefresh">
                </div>
              </template>
            </el-form-item>
            <el-form-item>
              <template>
                <el-button
                  class="login-but"
                  :loading="loading"
                  @click="login"
                >登录</el-button>
              </template>
            </el-form-item>
            <el-form-item>
              <template>
                <p class="hint-text">
                  仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！
                </p>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeAPI } from '@/api/user'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      // 登录表单
      form: {
        username: 'shenlingadmin',
        password: '123456',
        code: '',
        key: '1234'
      },
      // 登录表单验证规则
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            min: 1,
            max: 3,
            message: '长度在 1 到 3 个字符',
            trigger: ['blur', 'change']
          }
        ]
      },
      // 登录加载状态
      loading: false,
      // 验证码
      codeUrl: '',
      // 防抖
      timer: null
    }
  },
  created() {
    this.getCode()
  },
  methods: {
    ...mapActions('user', ['actionLogin']),
    // 登录
    async login() {
      this.loading = true
      const { code, msg } = await this.actionLogin(this.form)
      if (code === 200) {
        this.$router.push('/dashboard')
        this.$message.success('登录成功')
      } else {
        this.$message.error(msg)
      }
      this.loading = false
    },
    // 获取验证码
    getCode() {
      getCodeAPI().then((res) => {
        const codeBase64 = btoa(
          new Uint8Array(res.data).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ''
          )
        )
        this.codeUrl = `data:image/png;base64,${codeBase64}`
      })
    },
    // 刷新验证码
    codeRefresh() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getCode()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: transparent;

  .login-video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -99;

    video {
      width: 100%;
      height: 100%;
      vertical-align: middle;
      object-fit: cover;
    }
  }

  .login-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: 30px 40px;
    border-radius: 15px;
    width: 410px;
    background-color: #fff;
    border: 5px solid #189450;

    .logo {
      text-align: center;
      margin-bottom: 28px;
      img {
        width: 195px;
        height: 54px;
      }
    }

    .login-iconBox {
      position: relative;
      .iconfont-img {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 21px;
        height: 21px;
        z-index: 1;
      }

      .imgCode {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translate(0, -50%);
        width: 65px;
      }
    }

    .login-but {
      width: 100%;
      height: 55px;
      background-color: #189450;
      color: #fff;
      font-weight: bold;
    }
    .hint-text {
      text-align: center;
      margin-top: 20px;
      margin-bottom: 0;
      line-height: 1.5;
      color: #999;
      font-size: 12px;
    }
  }
}

::v-deep .el-input__inner {
  text-indent: 20px;
}
</style>
